<template>
	<view class="everyday">
		<view class="everydaybag">
			<image src="../../static/everyday/bag-t.png"></image>
		</view>
		<view class="everydayposition">
			<view class="everydaywithe">
				<view class="everydaywithe-title">-您连续答题<text>{{date}}</text>天-</view>
				<view class="everydaywithe-flex">
					<view class="everydaywithe-flex-v"  v-for="(item,index) in level" v-if="item.questions"
					@click="urlClick('/pages/questions/questions?id='+item.questions.id+'&lid='+item.id+'&is_date=0')"
					>
						<view class="everydaywithe-flex-v-1">{{item.name}}</view>
						<view class="everydaywithe-flex-v-2">点击开始</view>
					</view>
					
					
				</view>
				
			</view>
			
			<view class="everydaylist">
				<view class="everydaylist-tab">
					<view  v-for="(item,index) in level" v-if="item.questions" :class="lid==item.id ? 'pitchon' : ''" @click="lidClick(item.id)">{{item.name}}</view>
			
				</view>
				
				<view class="seniority-list-view" v-for="(item,index) in list"  v-if="list.length > 0">
					<image :src="item.user.avatar"></image>
					<view class="seniority-list-view-nickname">{{item.user.nickname}}</view>
					<view class="seniority-list-view-level">{{item.lname}}级别</view>
					<view class="seniority-list-view-date">{{item.time}}秒</view>
				</view>
				<view class="notavailable" v-if="list.length ==0">
					<image src="../../static/zan.png"></image>
					<view>暂无数据</view>
				</view>
			
			</view>
		</view>	
	</view>
</template>


<script>
	export default {
		data() {
			return {
				cid  : '',
				date : 0,
				info : {},
				level: {},
				questionsuser  : [],
				lid   : '',
				list  : [],
				count : '',
				page  : 1,
				limit :  10
			}
		},
		onLoad(e) {
			console.log(e);
			this.cid = e.cid;
			this.getall();
		},
		onReachBottom(){
			this.page += 1;
			this.getall();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.list= [];
			setTimeout(()=>{
				this.getall();
				uni.stopPullDownRefresh();
			},1000)
		},
		methods:{
			urlClick(e){
				uni.navigateTo({
					url:e
				})
			},
			lidClick(e){
				this.lid = e;
				this.list =[];
				this.getQuestionsuser();
				console.log(e);
			},
			getQuestionsuser(){
				let that  = this;
				that.$questions.getQuestionsuser({'lid':that.lid,'page':that.page,'limit':that.limit,'user_id':'all','is_date':0}).then(res=>{
					that.list = [...that.list,...res.data.list];
					console.log(that.list.length)
					that.count= res.data.count;
				})
			},
			getall(){
				let  that = this;
				that.$questions.getQuestionsLevel({'type':'is_date'}).then(res=>{
					that.level = res.data.list;
					that.lid   = that.level[0]['id'];
					that.getQuestionsuser();
					console.log(res);
				})
				that.$api.getEverydayinfo({}).then(res=>{
					that.date = res.data.date;
				})
			}
		}
	}
</script>

<style lang="less">
	.everyday {
		width: 100%;
		min-height:100vh ;
		background-color: #f6f9f9;
		color: #333;
		.everydaybag {
			width: 750rpx;
			height: 488rpx;
			background-image: url();
			background-size: 100% 100%;
			image {
				width: 402rpx;
				height: 280rpx;
				display: block;
				margin: auto;
				padding-top: 84rpx;
			}
		}
		.everydayposition {
			position: absolute;
		
			left: 0; right: 0;
			margin-top: -114rpx;
		}
		.everydaywithe {
			width: 690rpx;
			min-height: 268rpx;
			background-color: #fff;
			box-shadow: 0px 0px 10rpx 0px rgba(0,0,0,0.1);
				margin: auto;
			border-radius: 20rpx;
			.everydaywithe-title {
				text-align: center;
				line-height: 82rpx;
				font-size: 36rpx;
				letter-spacing: 7rpx;
				text {
					font-size: 38rpx;
					color: #E99E1E;
				}
			}
			.everydaywithe-flex {
				display: flex;
				flex-wrap: wrap;
				
				width: 90%;
				margin: auto;
				border-bottom: 2rpx solid #e3e3e3;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.everydaywithe-flex-v {
					width: 33%;
					margin-bottom: 30rpx;
					text-align: center;
					.everydaywithe-flex-v-1 {
						padding-bottom: 6rpx;
						font-size: 34rpx;
					}
					.everydaywithe-flex-v-2 {
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
			.everydaywithe-flex:last-child {
				border: none;
			}
		}
		.everydaylist {
			width: 690rpx;
			min-height: 200rpx;
			background-color: #fff;
			box-shadow: 0px 0px 10rpx 0px rgba(0,0,0,0.1);
			margin: auto;
			margin-top: 40rpx;
			border-radius: 20rpx;
			padding-bottom: 20rpx;
			.everydaylist-tab {
				display: flex;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				view {
					flex: 1;
					text-align: center;
					
				}
				.pitchon {
					color: #3eb8ff;
					font-size: 34rpx;
					font-weight: bold;
					
				}
				
			}
			.seniority-list-view{
				display: flex;
				line-height: 120rpx;
				margin: auto;
				margin-bottom: 48rpx;
				width: 94%;
				margin-top: 20rpx;
				image {						
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.seniority-list-view-nickname {
					flex: 2;
					font-size: 34rpx;
					padding-left: 20rpx;
				}
				.seniority-list-view-level {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}
				.seniority-list-view-date {
					font-size: 32rpx;
					flex: 1;
					text-align: right;
				}
			}
		}
	}
</style>